<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 浅拷贝：拷贝的是地址
    // 常见方法：
    // 1.拷贝对象：Object.assgin()    或    展开运算符 {...obj} 拷贝对象
    // 2.拷贝方法：Array.prototype.concat()    或    [...arr]

    // 如果是简单数据类型就拷贝值，引用数据类型就拷贝的是地址
    // 简单理解：如果是单层对象，没问题，如果有多层对象就有问题

    // 直接赋值和浅拷贝的区别：
    // -->直接赋值的方法，只要是对象，都会相互影响，因为是直接拷贝对象栈里面的地址
    // -->浅拷贝如果是一层对象，不相互影响，如果出现多层对象就拷贝还会相互影响

    // 浅拷贝
    const obj = {
      uname: 'cxk',
      age: 18,
      family: {  // 还是有问题
        baby: '小cxk'
      }
    }
    // 第一种写法：
    /* const o = { ...obj }
    console.log(o)    // {uname: 'cxk', age: 18}
    o.age = 20
    console.log(o)    // {uname: 'cxk', age: 20}
    console.log(obj)  // {uname: 'cxk', age: 18} */
    // 第二种写法：
    const o = {}
    Object.assign(o, obj)
    o.age = 20
    console.log(o)    // {uname: 'cxk', age: 20}
    console.log(obj)  // {uname: 'cxk', age: 18}
    o.family.baby = '老cxk'
    console.log(o)    // {uname: 'cxk', age: 20, 老cxk}
    console.log(obj)  // {uname: 'cxk', age: 18, 老cxk} 还是有问题 再套一层也和外层一样道理，拷贝的是地址

  </script>
</body>

</html>